<template>
  <transition name="slide" @after-leave="onAfterLeave">
    <div v-show="visible" :class="['it-message', type]">
      <div class="message-content">
        {{ content }}
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'info',
    validator(val) {
      return ['success', 'error', 'info', 'warning'].includes(val)
    },
  },
  duration: {
    type: Number,
    default: 2000,
  },
  content: {
    type: String,
    default: '',
  },
})
let visible = ref(false)

onMounted(() => {
  visible.value = true
  autoClose()
})

const autoClose = () => {
  setTimeout(() => {
    visible.value = false
  }, props.duration)
}
const onAfterLeave = () => {
  close()
}
const close = () => {
  document.getElementById('it-message').remove()
}
</script>

<style scoped>
.it-message {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  color: #ffffff;
  padding: 10px 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
</style>
